<%@ page language="java" contentType="text/html; charset=UTF-8" import="java.util.*"
	pageEncoding="UTF-8"%>

<%  
	String path = request.getContextPath();  
%>  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>Upload Videos</title>
	<meta http-equiv="Content-Type" content="text/html; charset=cp936">
	<meta http-equiv="pragma" content="no-cache">  
    <meta http-equiv="cache-control" content="no-cache">  
    <meta http-equiv="expires" content="0">
    <link rel="stylesheet" href="../css/jquery-ui.custom.min.css" type="text/css"></link>  
	<script type="text/javascript" src="../js/jQuery1.82.js"></script>
	<script type="text/javascript" src="../js/jquery-ui-1.9.1.custom.min.js"></script>
	<script type="text/javascript">
		
	
		$(document).ready(function(){
			var form = $('#VideoUploadForm');

			var stateBar = $('#progress').children('.pbar').progressbar();
			
			var setState = function( val ){

				stateBar.progressbar( "value", val * 100 );
			};
			
			form.bind("submit", function(){
				
				console.log("submit called");
				var url = "UploadVideo";
				var currentState = 0;// progress
				
				var stateHandler = function( jsonObj ){
					console.log(jsonObj);
					if( jsonObj.error == 1)
					{
						//Error Handling
						return false;
					}
					else
					{
						currentState = jsonObj.readedBytes / jsonObj.totalBytes;
						setState( currentState );
						return true;
					}
				};
				
				setTimeout( (function stateRequest(){
					$.ajax({
						"url" : url	
					}).done(function( jsonObj ){
						console.log(jsonObj);
						jsonObj = JSON.parse( jsonObj.toString() );
						if( stateHandler( jsonObj ) && currentState < 1 )
							setTimeout( stateRequest, 1000 );
					});
				}), 1000);
				
				return true;
			})
			
		});
		
	</script>
</head>
<body>			   																																																																																																																																																																																																																																																																																																																																																																																																																																																																		
	<form method="post" action="UploadVideo" ENCTYPE="multipart/form-data" name="VideoUploadForm" id="VideoUploadForm" >
		<label for="VideoFile">上传地址</label><input type="file" name="VideoFile" id="VideoFile" /><br />
		<label for="VideoTitle">视频标题</label><input	type="text" name="VideoTitle" id="VideoTitle" /><br />
		<label for="VideoProvince">省份</label><input type="text" name="VideoProvince" id="VideoProvince" />
		<label for="VideoCollege">学校</label><input type="text" name="VideoCollege" id="VideoCollege" />
		<label for="VideoSchool">学院</label><input type="text" name="VideoSchool" id="VideoSchool" /><br />
		<label for="VideoGrade">所属年级</label><input type="text" name="VideoGrade" id="VideoGrade" /><br />
		<label for="VideoTag">视频标签</label><input type="text" name="VideoTag" id="VideoTag" /><br />
		<label for="VideoDescription">视频描述</label><input type="text" name="VideoDescription" id="VideoDescription" /><br />
		
		<input type="submit" value="确认上传" name="UploadButton" id="UploadButton" /><br />
		        <span id='txt' ></span><br><br>  
       <div id="progress" style="width: 400px" >  
            <div class="percent"></div>  
            <div class="pbar"></div>  
            <div class="elapsed"></div>  
        </div>  
        <span id=bytes ></span><br>  
	</form>
</body>
</html>